<template>
  <div class="ChatRoomContent">
    <div class="chat-room-content">
      <!-- 聊天记录 -->
      <div class="chat-messages">

      
        <div class="chat-message" v-for="message in chatMessages" :key="message.id">
          <div class="user-avator">
          <el-avatar>
            张三
         </el-avatar>
         </div>

         <div class="main-box">
          <div class="user-name">
          <span>张三</span>
          <span>下午14:24</span>
        </div>
        <div class="message-box">
          <span>{{ message.content }}</span>
        
        </div>

         </div>
     
        </div>


        
      </div>

      <!-- 输入框 -->
      <div class="chat-input">
        <input type="text" v-model="newMessage" placeholder="输入消息" @keyup.enter="sendMessage">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chatMessages: [], // 聊天记录
      newMessage: '222' // 新消息输入框内容
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        // 将新消息加入聊天记录
        this.chatMessages.push({
          id: Date.now(),
          content: this.newMessage
        });

        // 清空输入框
        this.newMessage = '';
      }
    }
  }
};
</script>

<style scoped>
.chat-room-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.chat-message {
  display: flex;
  margin-bottom: 5px;
  padding: 16px;
}
.user-avator{
  margin-right: 10px;
}

.message-box span{
  padding: 10px;
  background-color: rgba(204, 224, 255);
  border-radius: 8px;
}

.main-box{

}
.main-box span:first-child{
  margin-right: 15px;
  font-size: 13px;
  
}
.main-box span:last-child{
  font-size: 13px;
   
}

.message-box{
  margin-top: 10px;
}
.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
}
.chat-input input {
  flex: 1;
  height: 30px;
  padding: 5px;
  margin:10px 0 20px 0;
  border: 2px solid #dee0e3;
  border-radius: 4px;
}
</style>